<template>
    <div class="app-container">
        <table-header-component v-on:create="create" v-on:getList="getList">
            <el-input v-model="searchForm.subject_name" placeholder="请输入名字" style="width: 200px;"></el-input>
            <!--<el-select v-model="searchForm.status" placeholder="请选择状态">-->
            <!--<el-option label="全部" value=""></el-option>-->
            <!--<el-option v-for="item in options.status" :key="item.value" :label="item.text" :value="item.value"></el-option>-->
            <!--</el-select>-->
        </table-header-component>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="subject_name" label="名字"></el-table-column>
            <el-table-column prop="order" label="排序"></el-table-column>
            <el-table-column prop="status" label="状态" ></el-table-column>
            <el-table-column prop="created_at" label="发表时间"></el-table-column>
            <!--<el-table-column label="状态">-->
            <!--<template slot-scope="scope">-->
            <!--{{scope.row.status | formatByOptions(options.status, 'value', 'text')}}-->
            <!--</template>-->
            <!--</el-table-column>-->
            <el-table-column align="center" label="操作" width="250">
                <template slot-scope="scope">
                    <!--<el-button size="small" type="info" >详情</el-button>-->

                    <router-link :to="{ path: '/user/particulars/' + scope.row.id }">
                        <el-button size="small" type="warning">进入医生列表</el-button>
                    </router-link>
                    <el-button size="small" type="warning" @click="create1(scope.row.id)">编辑</el-button>
                    <!--<el-button size="small" type="danger" @click="trashed(scope.row.id)">删除</el-button>-->
                </template>
            </el-table-column>
        </el-table>
        <pagination-component ref="pagination" v-on:getList="getList"></pagination-component>

        <!--添加弹框-->
        <el-dialog :title="formTitle" :visible.sync="formVisible" :close-on-click-modal="false" :close-on-press-escape="false">
            <el-form class="small-space" :model="form" :rules="rules" ref="form" label-position="left" label-width="100px">
                <input type="hidden" v-model="form.id">
                <el-form-item label="科目首页海报" prop="subject_image1">
                    <el-upload
                            class="avatar-uploader"
                            :action="importFileUrl"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess1"
                            :on-error="handleError"
                            :before-upload="beforeAvatarUpload"
                            :data="upLoadData"
                            :on-change="handleChange">
                        <img v-if="imageUrl1" :src="imageUrl1" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        <div class="el-upload__text">建议尺寸720*266</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="科目详情海报" prop="subject_image2">
                    <el-upload
                            class="avatar-uploader"
                            :action="importFileUrl"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess2"
                            :on-error="handleError"
                            :before-upload="beforeAvatarUpload"
                            :data="upLoadData"
                            :on-change="handleChange">
                        <img v-if="imageUrl2" :src="imageUrl2" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        <div class="el-upload__text">建议尺寸750*320</div>
                    </el-upload>
                </el-form-item>
                <el-form-item label="科目名称" prop="subject_name">
                    <el-input v-model="form.subject_name" placeholder="请填写科目名称"></el-input>
                </el-form-item>
                <el-form-item label="科目介绍" prop="comment">
                    <el-input v-model="form.comment" placeholder="请填写科目介绍"></el-input>
                </el-form-item>
                <el-form-item label="显示排序" prop="order">
                    <el-input v-model="form.order" placeholder="请填写排序整数"></el-input>
                </el-form-item>

                <el-form-item label="状态" prop="status">
                    <el-select v-model="form.status" placeholder="请选择状态">
                        <el-option label="显示" value="1"></el-option>
                        <el-option label="隐藏" value="0"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <dialog-footer-component v-on:submit="submit(formName = 'form')" v-on:close="close"></dialog-footer-component>
        </el-dialog>


        <!--编辑弹框-->
        <el-dialog :title="editTitle" :visible.sync="editVisible" :close-on-click-modal="false" :close-on-press-escape="false">
            <el-form class="small-space" :model="editform" :rules="rules" ref="editform" label-position="left" label-width="100px">
                <input type="hidden" v-model="editform.id">
                <el-form-item label="科目首页海报" prop="subject_image1">
                    <el-upload
                            class="avatar-uploader"
                            :action="importFileUrl"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess3"
                            :on-error="handleError"
                            :before-upload="beforeAvatarUpload"
                            :data="upLoadData"
                            :on-change="handleChange">
                        <img v-if="imageUrl3" :src="imageUrl3" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="科目详情海报" prop="subject_image2">
                    <el-upload
                            class="avatar-uploader"
                            :action="importFileUrl"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess4"
                            :on-error="handleError"
                            :before-upload="beforeAvatarUpload"
                            :data="upLoadData"
                            :on-change="handleChange">
                        <img v-if="imageUrl4" :src="imageUrl4" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="科目名称" prop="subject_name">
                    <el-input v-model="editform.subject_name" placeholder="请填写科目名称"></el-input>
                </el-form-item>
                <el-form-item label="科目介绍" prop="comment">
                    <el-input v-model="editform.comment" placeholder="请填写科目介绍"></el-input>
                </el-form-item>
                <el-form-item label="显示排序" prop="order">
                    <el-input v-model="editform.order" placeholder="请填写排序整数"></el-input>
                </el-form-item>

                <el-form-item label="状态" prop="status">
                    <el-select v-model="editform.status" placeholder="请选择状态">
                        <el-option label="显示" value="1"></el-option>
                        <el-option label="隐藏" value="0"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <dialog-footer-component v-on:submit="editsubmit(formName = 'editform')" v-on:close="close2"></dialog-footer-component>
        </el-dialog>





    </div>
</template>
<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
<script>
    import PaginationComponent from '../../common/pagination-component.vue';
    import TableHeaderComponent from '../../common/table-header-component.vue';
    import DialogFooterComponent from '../../common/dialog-footer-component.vue';

    export default {
        components: {
            'pagination-component': PaginationComponent,
            'table-header-component': TableHeaderComponent,
            'dialog-footer-component': DialogFooterComponent,

        },
        data() {
            return {
                formTitle: '',
                editTitle:'',
                dialogVisible:false,
                editVisible:false,
                restrictTwo:true,
                importFileUrl: 'http://upload-z2.qiniup.com',
                imageUrl1:'',
                imageUrl2:'',
                imageUrl3:'',
                imageUrl4:'',
                upLoadData: {
                    token: '',
                },
                formVisible:false,
                tableData: [],
                searchForm: {
                    subject_name: '',
                },
                form: {
                    id: '',
                    subject_name: '',
                    comment: '',
                    order: '',
                    status: '',
                    subject_image1: '',
                    subject_image2: '',
                },
                editform: {
                    id: '',
                    subject_name: '',
                    comment: '',
                    order: '',
                    status: '',
                    subject_image1: '',
                    subject_image2: '',
                },
                options: {
                    status: [],
                    categories: []
                }
            }
        },
        mounted() {
            this.getList();
        },
        methods: {
            getList() {
                let _this = this;
                let search = {
                    'subject_name': _this.searchForm.subject_name,
                };
                let paramsData = { 'data': { 'search': search } };
                axios.get('/backend/subject?page=' + _this.$refs.pagination.pageData.current_page, { params: paramsData }).then(response => {
                    let { status, data, message } = response.data;
                    _this.tableData = data.lists.data;
                    _this.$refs.pagination.pageData.per_page = parseInt(data.lists.per_page);
                    _this.$refs.pagination.pageData.current_page = parseInt(data.lists.current_page);
                    _this.$refs.pagination.pageData.total = parseInt(data.lists.total);
                })
            },
            getUptoken() {
                let _this = this;
                axios.get('api/qiniu/token').then(response => {
                    let { status, data, message } = response.data;
                    _this.upLoadData.token= data.uptoken;
                });
            },
            submit(formName) {
                let _this = this;
                _this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.post('/backend/subject/create', { 'data': _this.form }).then(response => {
                            let {status, data, message} = response.data;
                            if (!status) {
                                _this.$message.error(message);
                                return false;
                            }
                            _this.$message.success(message);
                            //_this.$router.push({ path: '/brand/comment' });
                            _this.formVisible = false;
                            this.form.subject_image1='';
                            this.form.subject_image2='';
                            this.getList();
                        });
                    }
                });
            },
            editsubmit(formName) {
                let _this = this;
                _this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.post('/backend/subject/update', { 'data': _this.editform }).then(response => {
                            let {status, data, message} = response.data;
                            if (!status) {
                                _this.$message.error(message);
                                return false;
                            }
                            _this.$message.success(message);
                            _this.editVisible = false;
                            this.getList();
                        });
                    }
                });
            },
            handleChange(file,fileList) {
                //限制数量
                if(fileList.length>2){
                    fileList.splice(0,1);
                    this.restrictTwo=false;
                }
            },
            handleAvatarSuccess1(res, file) {
                //上传成功后在图片框显示图片
                this.imageUrl1 ='http://orrs4ojbz.bkt.clouddn.com/'+ res.key;
                this.form.subject_image1=res.key;
                this.dialogVisible=true;
            },
            handleAvatarSuccess2(res, file) {
                //上传成功后在图片框显示图片
                this.imageUrl2 ='http://orrs4ojbz.bkt.clouddn.com/'+ res.key;
                this.form.subject_image2=res.key;
                this.dialogVisible=true;
            },
            handleAvatarSuccess3(res, file) {
                //上传成功后在图片框显示图片
                this.imageUrl3 ='http://orrs4ojbz.bkt.clouddn.com/'+ res.key;
                this.editform.subject_image1=res.key;
                this.editVisible=true;
            },
            handleAvatarSuccess4(res, file) {
                //上传成功后在图片框显示图片
                this.imageUrl4 ='http://orrs4ojbz.bkt.clouddn.com/'+ res.key;
                this.editform.subject_image2=res.key;
                this.editVisible=true;
            },
            create() {
                let _this = this;
                _this.formTitle = '添加科目';
                Vue.resetForm(_this.form);
                _this.formVisible = true;
                _this.getUptoken();

            },
            create1(id) {
                let _this = this;
                Vue.resetForm(_this.editform);
                _this.getUptoken();
                let search = {'id': id,};
                let paramsData = { 'data': { 'search': search } };
                axios.get('/backend/subject?page=' + _this.$refs.pagination.pageData.current_page, { params: paramsData }).then(response => {
                    let { status, data, message } = response.data;
                    _this.editTitle = '编辑科目';
                    _this.editVisible = true;
                    _this.imageUrl3 ='http://orrs4ojbz.bkt.clouddn.com/'+ data.lists.data[0].subject_image1;
                    _this.imageUrl4 ='http://orrs4ojbz.bkt.clouddn.com/'+ data.lists.data[0].subject_image2;
                    _this.editform.subject_image1 =data.lists.data[0].subject_image1;
                    _this.editform.subject_image2 =data.lists.data[0].subject_image2;
                    _this.editform.id = id;
                    _this.editform.subject_name = data.lists.data[0].subject_name;
                    _this.editform.comment = data.lists.data[0].comment;
                    _this.editform.order = data.lists.data[0].order;
                    _this.editform.status = data.lists.data[0].status;

                })



            },
            details(){

            },
            close(){
                let _this = this;
                _this.formVisible = false;
                this.form.subject_image1='';
                this.form.subject_image2='';
            },
            close2(){
                let _this = this;
                _this.editVisible = false;
            },


        }
    }
</script>